<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-02 09:31:50
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 21:40:01
 * @FilePath: /nhw/src/views/Work/SafetyInspection/index.vue
-->
<template>
  <Layout
    class="satety-inspection-container"
    title="安全检查"
    border
    @click-right="$router.push({ name: 'SafetyPresent' })"
  >
    <template #right>
      <Icon name="plus" />
    </template>
    <!-- main  -->
    <Tabs v-model="active" sticky :offset-top="$store.state.navHeight">
      <Tab title="待检查">
        <PullRefresh v-model="isLoadingA" @refresh="onRefresh">
          <List
            v-model="loadingA"
            :finished="finishedA"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <Card
              v-for="item in ToCheckList"
              :key="item.rprNo"
              class="list-item"
              @click="toDetail(item.rprNo)"
            >
              <CardTitle
                class="item-container"
                text="检查任务编号"
                :listId="item.rppdId"
                :adorn="false"
                :stateText="item.state"
              />
              <CardTwig
                :left="item.rprName"
                style="color: #c6a86f"
                border
                strong
                adorn
              />
              <CardTwig left="检查类别" :right="item.rprType" />
              <CardTwig left="检查范围" :right="item.area" />
              <CardTwig left="计划检查日期" :right="item.planTime" />
            </Card>
          </List>
        </PullRefresh>
      </Tab>
      <Tab title="已检查">
        <PullRefresh v-model="isLoadingB" @refresh="onRefresh">
          <List
            v-model="loadingB"
            :finished="finishedB"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <Card
              v-for="item in checkedList"
              :key="item.rprNo"
              class="list-item"
              @click="toDetail(item.rprNo)"
            >
              <CardTitle
                class="item-container"
                text="检查任务编号"
                :listId="item.rprId"
                :stateText="item.state"
                :adorn="false"
              />
              <CardTwig
                :left="item.rprName"
                style="color: #c6a86f"
                border
                strong
                adorn
              />
              <CardTwig left="检查类别" :right="item.rprType" />
              <CardTwig
                left="检查范围"
                :right="item.area"
                v-if="item.rprType == '计划内'"
              />
              <CardTwig
                left="计划检查日期"
                :right="item.planTime"
                v-if="item.rprType == '计划内'"
              />
              <CardTwig left="实际检查日期" :right="item.actualTime + ''" />
            </Card>
          </List>
        </PullRefresh>
      </Tab>
    </Tabs>
    <!-- main -->
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import { Tab, Tabs, Icon, List, PullRefresh } from "vant";

import { planRecordList } from "@/api/work.js";
export default {
  name: "SatetyInspection",

  components: {
    Layout,
    Card,
    CardTwig,
    CardTitle,
    Tab,
    Tabs,
    Icon,
    List,
    PullRefresh,
  },

  data() {
    return {
      active: 0,
      //待检查
      loadingA: false,
      finishedA: false,
      isLoadingA: false,
      pageNumA: 1,
      ToCheckList: [],
      //已检查
      loadingB: false,
      finishedB: false,
      isLoadingB: false,
      pageNumB: 1,
      checkedList: [],
    };
  },
  created() {
    this.getToCheck().then((res) => {
      this.ToCheckList = res.param.data;
    });
    this.getChecded().then((res) => {
      this.checkedList = res.param.data;
    });
  },
  mounted() {},

  methods: {
    //单据详情
    toDetail(value) {
      //带检查没有检查问题
      //带检查存在检查
      console.log(value);
      this.$router.push({
        name: "SafetyDetails",
        query: { id: value, type: this.active },
      });
      //已检查临时
      //已检查计划性
    },
    //滑动到底部加载
    onLoad() {
      // 异步加载数据
      if (this.active === 0) {
        this.pageNumA++;
        this.getToCheck({
          pageNum: this.pageNumA,
        }).then((res) => {
          this.ToCheckList.push(...res.param.data);
          this.loadingA = false;
        });
      } else if (this.active === 1) {
        this.pageNumB++;
        this.getChecded({
          pageNum: this.pageNumB,
        }).then((res) => {
          this.checkedList.push(...res.param.data);
          this.loadingB = false;
        });
      }
    },
    //下拉刷新
    onRefresh() {
      if (this.active === 0) {
        this.getToCheck().then((res) => {
          this.ToCheckList = res.param.data;
          this.isLoadingA = false;
        });
      } else if (this.active === 1) {
        this.getChecded().then((res) => {
          this.checkedList = res.param.data;
          this.isLoadingB = false;
        });
      }
    },
    //获取待检查数据
    async getToCheck(data) {
      data = { pageNum: 1, pageSize: 20, state: 0, ...data };
      const res = await planRecordList(data);
      if (res.param.sumPage == this.pageNumA || res.param.data.length <= 0) {
        this.finishedA = true;
      }
      return res;
    },
    //获取已检查数据
    async getChecded(data) {
      data = { pageNum: 1, pageSize: 20, state: 1, ...data };
      const res = await planRecordList(data);
      if (res.param.sumPage == this.pageNumB || res.param.data.length <= 0) {
        this.finishedB = true;
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.satety-inspection-container {
  width: 100%;
}
/deep/ .van-tabs__line {
  background-color: transparent;
  background-image: linear-gradient(90deg, #e0680f, #e68840);
}
</style>